{% extends "base.html" %}

{% block content %}
<div class="container-fluid p-3 my-3 border">
    <h1 class="my-3">硅芯用户管理系统</h1>
    
    <!-- 显示 flash 消息 -->
    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                    {{ message }}
                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="row mb-5 p-5 my-5 border">

        <div class="col-7 card dashboard-card mb-3 p-3">
            <h5 class="card-title">仪表盘</h5>
            <div class="row" style="height: 100%;"> 
                <!-- 总用户数 -->
                <div class="col-3 card mx-3 mb-3 dashboard-card" style="background-image: url('/static/images/all_users.png'); background-size: cover;">
                    <p class="card-title text-center" style="font-size: 64px; color: #e9ecef;">{{ users|length }}</p>
                    <p class="card-subtitle text-center flex: 1;">总用户数</p>
                </div>

                <!-- 活跃用户数 -->
                <div class="col-3 card mx-3 mb-3 dashboard-card" style="background-image: url('/static/images/active_users.png'); background-size: cover;">
                    <p class="card-title text-center" style="font-size: 64px; color: #18d328;">{{ users|selectattr('is_active')|list|length }}</p>
                    <p class="card-subtitle text-center">活跃用户数</p>
                </div>
                
                <!-- 禁用户数 -->
                <div class="col-3 card mx-3 mb-3 dashboard-card" style="background-image: url('/static/images/inactive_users.png'); background-size: cover;">
                    <p class="card-title text-center" style="font-size: 64px; color: #f2f55b;">{{ users|rejectattr('is_active')|list|length }}</p>
                    <p class="card-subtitle text-center">禁用户数</p>
                </div>
                
            </div>
        </div>

        <div class="col-4 card dashboard-card mb-3 p-3 mx-3">
            <h5 class="card-title">最近创建的用户</h5>
            <div class="list-group">
                {% for user in users[:3] %}
                <div class="d-flex w-100 flex-column">
                    <div class="mb-3">
                        <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                            {% if user.is_active %}活跃{% else %}禁用{% endif %}
                        </span>
                        <strong>{{ user.user_name }}</strong>
                        (<i>{{ user.uuid }}</i>)
                    </div>
                    <div class="d-flex align-items-center justify-content-between">
                        <small class="ms-4">创建于 {{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</small>
                        <small><a class="user-detail-link" 
                                data-user-uuid="{{ user.uuid }}" 
                                style="color: #007bff;" 
                                href="javascript:void(0)">
                            查看详情
                        </a></small>
                    </div>
                </div>
                <hr>
                {% endfor %}
            </div>
        </div>

    </div>

    <div class="offcanvas myOffcanvas-end" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
            <h5 id="offcanvasRightLabel">用户详情</h5>
            <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body">
            <!-- 基本信息 -->
            <div class="card">
                <div class="card-header">基本信息</div>
                <div class="card-body">
                    <p class="detail-item">
                        <strong class="detail-label">用户名:</strong>
                        <span class="detail-content" id="detail-username">加载中...</span>
                    </p>
                    <p class="detail-item">
                        <strong class="detail-label">UUID:</strong>
                        <code class="detail-content" id="detail-uuid">加载中...</code>
                    </p>
                    <p class="detail-item">
                        <strong class="detail-label">状态:</strong>
                        <span class="detail-content" id="detail-status">加载中...</span>
                    </p>
                    <p class="detail-item">
                        <strong class="detail-label">创建时间:</strong>
                        <span class="detail-content" id="detail-created">加载中...</span>
                    </p>
                    <p class="detail-item">
                        <strong class="detail-label">修改次数:</strong>
                        <span class="detail-content" id="detail-history-count">0</span>
                    </p>
                </div>
            </div>

            <div class="card mt-4">
                <div class="card-header">历史记录</div>
                <div class="card-body">
                    <div id="history-table" class="d-none">
                        <table class="table">
                            <thead>
                                <tr>
                                    <th>时间</th>
                                    <th>操作</th>
                                    <th>详情</th>
                                </tr>
                            </thead>
                            <tbody></tbody>
                        </table>
                    </div>
                    <div id="no-history-alert" class="alert alert-info">暂无记录</div>
                </div>
            </div>
        </div>

        <div class="offcanvas-footer">
            <div class="m-2 d-flex align-items-center justify-content-end">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="offcanvas">取消</button>
                <form method="POST" action="{{ url_for('delete_user_route') }}" id="deleteUserForm">
                    <input type="hidden" id="deleteUserUUID" name="user_uuid" value="">
                    <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除此用户吗？')">
                        删除
                    </button>
                </form>
                <button type="button" id="status-toggle-btn" class="btn btn-warning" onclick="toggleStatus()">改变状态</button>
                <form method="POST" action="{{ url_for('download') }}" id="downloadCryptoForm">
                    <input type="hidden" id="downloadCryptoUsername" name="user_name" value="">
                    <button type="submit" class="btn btn-primary">下载</button>
                </form>
                
            </div>
        </div>
    </div>

    <!-- 用户管理 -->
    <div class="card user-table mb-3">
        <div class="card-header">
            <div class="d-flex align-items-center justify-content-between">
                <div class="ml-auto">
                    <h4>用户管理</h4>
                </div>
                <div class="me-md-2 text-right">
                    <!-- 新建用户按钮 -->
                    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#createUserModal"><i class="bi bi-person-plus-fill"></i> 创建新用户 </button>
                </div>

                <!-- 模态框 -->
                <div class="modal fade" id="createUserModal" tabindex="-1" aria-labelledby="createUserModalLabel" aria-hidden="true">
                    <div class="modal-dialog">
                        <div class="modal-content">
                            <!-- 模态框头部 -->
                            <div class="modal-header">
                                <h4 class="modal-title" id="createUserModalLabel"><strong>创建新用户</strong></h4>
                                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                            </div>

                            <!-- 模态框内容 -->
                            <form method="POST" id="createUserForm" action="{{ url_for('create_user_route') }}" class="was-validated">
                                <div class="modal-body">
                                    <div class="form-floating mt-3 mb-3">
                                        <input type="text" class="form-control" id="user_name" name="user_name" placeholder="Enter username" required>
                                        <label for="user_name">用户名</label>
                                        <div class="valid-feedback">验证成功！</div>
                                        <div class="invalid-feedback">请输入用户名！</div>
                                    </div>
                                </div>
                                <!-- 模态框底部 -->
                                <div class="modal-footer">
                                    <button type="submit" class="btn btn-primary">确认</button>
                                    <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">取消</button>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>

            </div>
        </div>
        <div class="card-body">
            <!-- 搜索栏 -->
            <div class="row mb-3 justify-content-between">
                <div class="md-auto col-md-auto">
                    <!-- 分类标签 -->
                    <nav>
                        <div class="nav nav-tabs" id="nav-tab" role="tablist">
                            <a class="nav-item nav-link active" id="all-users-tab" data-bs-toggle="pill" href="#all-users"
                                role="tab" aria-controls="all-users" aria-selected="true">全部用户</a>
                            <a class="nav-item nav-link" id="active-users-tab" data-bs-toggle="pill" href="#active-users"
                                role="tab" aria-controls="active-users">活跃用户</a>
                            <a class="nav-item nav-link" id="inactive-users-tab" data-bs-toggle="pill" href="#inactive-users"
                                role="tab" aria-controls="inactive-users">禁用用户</a>
                        </div>
                    </nav>
                </div>
                <div class="col-md-auto text-end">
                    <div class="search-container d-flex gap-2">
                        <div class="input-group ">
                            <input type="text" id="usernameInput" class="form-control search-input" placeholder="请输入用户名">
                            <span class="input-group-text" style="cursor: pointer;" onclick="userNameSearch()">
                                <img src="{{ url_for('static', filename='images/search.svg') }}" alt="搜索" style="width: 18px; height: 18px;">
                            </span>
                        </div>

                        <div class="date-input-group col-md-6 mx-auto" id="dateSearchSection">
                            <div class="input-group">
                                <input type="date" id="dateInput" class="form-control search-input" id="dateInput">
                                <span class="input-group-text" style="cursor: pointer;" onclick="dateSearch()">
                                    <img src="{{ url_for('static', filename='images/calendar-date.svg') }}" alt="日期" style="width: 18px; height: 18px;">
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 用户表格 -->
            <div class="tab-content">
                <div class="tab-pane fade show active" id="all-users" role="tabpanel" aria-labelledby="all-users-tab">
                    <table class="table table-bordered table-striped table-hover text-center">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>用户名</th>
                                <th>UUID</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="all-users-table-body">
                            {% for user in users %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ user.user_name }}</td>
                                <td><code>{{ user.uuid }}</code></td>
                                <td class="status">
                                    <span  class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                                        {% if user.is_active %}活跃{% else %}禁用{% endif %}
                                    </span>
                                </td>
                                <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                    
                                        <form method="POST" action="{{ url_for('toggle_status_route') }}">
                                            <input type="hidden" name="user_uuid" value="{{ user.uuid }}">
                                            <button type="submit" class="btn btn-{% if user.is_active %}warning{% else %}success{% endif %}">
                                                {% if user.is_active %}禁用{% else %}激活{% endif %}
                                            </button>
                                        </form>
                                        
                                        <form method="POST" action="{{ url_for('delete_user_route') }}">
                                            <input type="hidden" name="user_uuid" value="{{ user.uuid }}">
                                            <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除此用户吗？')">
                                                删除
                                            </button>
                                        </form>

                                        <a data-user-uuid="{{ user.uuid }}" href="javascript:void(0)" class="btn btn-info user-detail-link" title="查看历史记录">
                                            <i class="bi bi-clock-history"></i> 详情
                                        </a>

                                        <form method="POST" action="{{ url_for('download') }}">
                                            <input type="hidden" name="user_name" value="{{ user.user_name }}">
                                            <button type="submit" class="btn btn-success" title="下载秘钥文件">
                                                <i class="bi bi-download"></i> 下载
                                            </button>
                                        </form>
                                        
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="row justify-content-between">
                        <div class="col-md-auto mt-2 ms-4 text-center" id="all-resultCount">
                            <p class="text-center">共 {{ users|length }} 项数据</p>
                        </div>
                        <div class="col-md-auto mt-2 text-center" id="all-search-result">
                            <p class="text-center"></p>
                        </div>
                        <!-- 分页控制 -->
                        <div class="col-md-auto mt-2 me-4 text-center d-flex align-items-center gap-2">
                            <div class="flex-fill" style="min-width: 110px;">
                                <select class="form-select" id="perPageSelect" 
                                        onchange="changePerPage(this.value)">
                                    <option value="10" selected>10 条/页</option>
                                    <option value="20">20 条/页</option>
                                    <option value="50">50 条/页</option>
                                </select>
                            </div>
                            <div class="flex-fill">
                                <nav aria-label="Page navigation" class="d-flex justify-content-end">
                                    <ul class="pagination mb-0"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 仅显示活跃用户 -->
                <div class="tab-pane fade" id="active-users" role="tabpanel" aria-labelledby="active-users-tab">
                    <table class="table table-bordered table-striped table-hover text-center">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>用户名</th>
                                <th>UUID</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="active-users-table-body">
                            {% for user in users if user.is_active %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ user.user_name }}</td>
                                <td><code>{{ user.uuid }}</code></td>
                                <td class="status">
                                    <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                                        {% if user.is_active %}活跃{% else %}禁用{% endif %}
                                    </span>
                                </td>
                                <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                    
                                        <form method="POST" action="{{ url_for('toggle_status_route') }}">
                                            <input type="hidden" name="user_uuid" value="{{ user.uuid }}">
                                            <button type="submit" class="btn btn-{% if user.is_active %}warning{% else %}success{% endif %}">
                                                {% if user.is_active %}禁用{% else %}激活{% endif %}
                                            </button>
                                        </form>
                                        
                                        <form method="POST" action="{{ url_for('delete_user_route') }}">
                                            <input type="hidden" name="user_uuid" value="{{ user.uuid }}">
                                            <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除此用户吗？')">
                                                删除
                                            </button>
                                        </form>

                                        <a data-user-uuid="{{ user.uuid }}" href="javascript:void(0)" class="btn btn-info user-detail-link" title="查看历史记录">
                                            <i class="bi bi-clock-history"></i> 详情
                                        </a>

                                        <form method="POST" action="{{ url_for('download') }}">
                                            <input type="hidden" name="user_name" value="{{ user.user_name }}">
                                            <button type="submit" class="btn btn-success" title="下载秘钥文件">
                                                <i class="bi bi-download"></i> 下载
                                            </button>
                                        </form>
                                        
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="row justify-content-between">
                        <div class="col-md-auto mt-2 ms-4 text-center" id="active-resultCount">
                            <p class="text-center">共 {{ users | selectattr('is_active', '==', true) | list | length }} 项数据 </p>
                        </div>
                        <div class="col-md-auto mt-2 text-center" id="active-search-result">
                            <p class="text-center"></p>
                        </div>
                        <!-- 分页控制 -->
                        <div class="col-md-auto mt-2 me-4 text-center d-flex align-items-center gap-2">
                            <div class="flex-fill" style="min-width: 110px;">
                                <select class="form-select" id="perPageSelect" 
                                        onchange="changePerPage(this.value)">
                                    <option value="10" selected>10 条/页</option>
                                    <option value="20">20 条/页</option>
                                    <option value="50">50 条/页</option>
                                </select>
                            </div>
                            <div class="flex-fill">
                                <nav aria-label="Page navigation" class="d-flex justify-content-end">
                                    <ul class="pagination mb-0"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 仅显示禁用用户 -->
                <div class="tab-pane fade" id="inactive-users" role="tabpanel" aria-labelledby="inactive-users-tab">
                    <table class="table table-bordered table-striped table-hover text-center">
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>用户名</th>
                                <th>UUID</th>
                                <th>状态</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody id="inactive-users-table-body">
                            {% for user in users if not user.is_active %}
                            <tr>
                                <td>{{ loop.index }}</td>
                                <td>{{ user.user_name }}</td>
                                <td><code>{{ user.uuid }}</code></td>
                                <td class="status">
                                    <span class="badge bg-{% if user.is_active %}success{% else %}danger{% endif %}">
                                        {% if user.is_active %}活跃{% else %}禁用{% endif %}
                                    </span>
                                </td>
                                <td>{{ user.created_at.strftime('%Y-%m-%d %H:%M:%S') }}</td>
                                <td>
                                    <div class="btn-group btn-group-sm">
                                    
                                        <form method="POST" action="{{ url_for('toggle_status_route') }}">
                                            <input type="hidden" name="user_uuid" value="{{ user.uuid }}">
                                            <button type="submit" class="btn btn-{% if user.is_active %}warning{% else %}success{% endif %}">
                                                {% if user.is_active %}禁用{% else %}激活{% endif %}
                                            </button>
                                        </form>
                                        
                                        <form method="POST" action="{{ url_for('delete_user_route') }}">
                                            <input type="hidden" name="user_uuid" value="{{ user.uuid }}">
                                            <button type="submit" class="btn btn-danger" onclick="return confirm('确定要删除此用户吗？')">
                                                删除
                                            </button>
                                        </form>

                                        <a data-user-uuid="{{ user.uuid }}" href="javascript:void(0)" class="btn btn-info user-detail-link" title="查看历史记录">
                                            <i class="bi bi-clock-history"></i> 详情
                                        </a>

                                        <form method="POST" action="{{ url_for('download') }}">
                                            <input type="hidden" name="user_name" value="{{ user.user_name }}">
                                            <button type="submit" class="btn btn-success" title="下载秘钥文件">
                                                <i class="bi bi-download"></i> 下载
                                            </button>
                                        </form>
                                        
                                    </div>
                                </td>
                            </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                    <div class="row justify-content-between">
                        <div class="col-md-auto mt-2 ms-4 text-center" id="inactive-resultCount">
                            <p class="text-center">共 {{ users | selectattr('is_active', '==', false) | list | length }} 项数据 </p>
                        </div>
                        <div class="col-md-auto mt-2 text-center" id="inactive-search-result">
                            <p class="text-center"></p>
                        </div>
                        <!-- 分页控制 -->
                        <div class="col-md-auto mt-2 me-4 text-center d-flex align-items-center gap-2">
                            <div class="flex-fill" style="min-width: 110px;">
                                <select class="form-select" id="perPageSelect" 
                                        onchange="changePerPage(this.value)">
                                    <option value="10" selected>10 条/页</option>
                                    <option value="20">20 条/页</option>
                                    <option value="50">50 条/页</option>
                                </select>
                            </div>
                            <div class="flex-fill">
                                <nav aria-label="Page navigation" class="d-flex justify-content-end">
                                    <ul class="pagination mb-0"></ul>
                                </nav>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>
    </div>

</div>
{% endblock %}